<template>
	<view class="box" >
		<view class="imageBox" :style="{gap:`${getImgStyle(imgCount).gap}`}">
			<view 
				v-for="(item,index) in imgList" 
				class="image-item" 
				:style="{
					width:`${getImgStyle(imgCount).width}`,
					height:`${getImgStyle(imgCount).height}`,
					paddingBottom:`${getImgStyle(imgCount).paddingBottom}`
				}"
				@click="showImage(imgList,item,index)"
			>
				<image :src="item.src" mode="aspectFit" />
			</view>
		</view>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center">
			<text class="tn-icon-close" @click="previewImg=''"></text>
			<tn-swiper class="thswiper" :current="currentPic" :height="windowHeight?windowHeight:800" :list="imglist" :autoplay="false" mode="number" imageMode="aspectFit"></tn-swiper>
			
			<tn-button class="fabu__btn" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="downloadpic"><text class="tn-icon-download"></text></tn-button>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			imgList:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				previewImg: '',
				imglist: [],
				currentPic: 0,
				windowWidth: 800,
				windowHeight: 800,
			}
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					console.log('res ----------- ',res)
					this.windowHeight = (res.windowHeight * (750/res.windowWidth)-200)
					this.windowWidth = res.windowWidth
				}
			})
		},
		computed:{
			imgCount(){
				return this.imgList.length
			}
		},
		methods:{
			getImgStyle(num){
				if(num === 1){
					return {
						width:'360rpx',
						height:'266rpx',
						paddingBottom:'266rpx',
						gap:'0rpx'
					}
				}else if(num === 2){
					return {
						width:'312rpx',
						height:'232rpx',
						paddingBottom:'232rpx',
						gap:'24rpx'
					}
				}else if(num === 3){
					return {
						width:'206rpx',
						height:'152rpx',
						paddingBottom:'152rpx',
						gap:'16rpx'
					}
				}else if(num === 4){
					return {
						width:'312rpx',
						height:'232rpx',
						paddingBottom:'232rpx',
						gap:'24rpx'
					}
				}
				return {
					width:'206rpx',
					height:'152rpx',
					paddingBottom:'152rpx',
					gap:'16rpx'
				}
			},
			showImage(imglist,image_item,image_index){
				this.currentPic = image_index
				this.previewImg = image_item.src;
				this.imglist = imglist
			},	
		}
	}
</script>

<style lang="less" scoped>
.box {
	.imageBox {
		position: relative;
		overflow: hidden;
		margin-bottom: 2%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		
		.image-item{
			position: relative;
			overflow: hidden;
			border-radius: 16rpx;
			image{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				background-size: cover;
				background-position: center;
				position: absolute;
				top:50%;
				left:50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
	}
	.image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  &.active{
			  background-color: rgba(255,255,255, 1);
		  }
		  .tn-icon-close{
			  position: absolute;
			  top: 200rpx;
			  right: 30rpx;
			  font-size:34px;
			  z-index: 888;
			  color: #ccc;
			  line-height: 36rpx;
		  }
		  .tn-icon-download-simple{
			  position: absolute;
			  bottom: 130rpx;
			  right: 30rpx;
			  font-size:28px;
			  z-index: 899;
			  color: #ffffff;
			  line-height: 36rpx;
		  }
	}
	.thswiper{
		width: 100%;
	}
	.fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
	}
}
</style>